<!--
* @Author: 张昊
* @Date:  2022-10-25 16:56:55
* @FilePath: /pages/subscribe/subscribe.vue
* @Description: 预约
-->
<template>
	<view class="class">
		<!-- 头部导航栏 -->
		<u-sticky offsetTop="100">
			<view class="tabbar">
				<view class="tabbar-item" v-for="(item, index) in ReachBottom" :key="index" @click="clickTabs({ index })">
					<view class="text">{{ item.name }}</view>
					<view :class="showView === index ? 'showView' : 'deActive'"></view>
				</view>
			</view>
		</u-sticky>
		<!-- 空白块 -->
		<view class="block"></view>
		<!-- 教室 -->
		<view class="class" v-if="showView === 0">
			<view class="common-list card" v-for="item in ReachBottom[0].uniqueDetailsItems" :key="item.id">
				<view class="imgs"><image mode="aspectFit" class="img" :src="'https://jy.plasmidedu.cn/' + item.image" :alt="item.image" /></view>

				<view class="img-list">
					<view class="img-title">{{ item.room_name || '暂无' }}</view>
					<view class="img-text">手机号码:{{ item.updatetime || '暂无' }}</view>

					<view class="img-text" v-text="'地址:' + item.address || '暂无'"></view>

					<!-- <view class="img-text" v-html="'房间简介:'+item.content"></view> -->
				</view>
				<view class="buttons"><u-button @click="clickRoom(item)" size="mini" type="primary" text="详情"></u-button></view>
			</view>
		</view>
		<!-- 教师 -->
		<view class="teacher" v-else-if="showView === 1">
			<view class="common-list card" v-for="item in ReachBottom[1].uniqueDetailsItems" :key="item.id">
				<view class="imgs"><image mode="aspectFit" class="img" :src="item.image" :alt="item.image" /></view>

				<view class="img-list">
					<view class="img-title">{{ item.teacher_name || '无名老师' }}</view>
					<!-- <view class="img-text">手机号码:{{ item.mobile }}</view> -->
					<view class="img-text" v-if="item.title">职称:{{ item.title || '暂无' }}</view>
					<!-- <view class="img-text">地址:{{ item.address }}</view> -->
					<!-- <view class="img-text">个人简介:{{ item.content }}</view> -->
					<view class="img-text" v-if="item.address">院校:{{ item.address || '暂无' }}</view>
				</view>
				<view class="buttons"><u-button @click="clickShopping(item)" size="mini" type="primary" text="预约"></u-button></view>
			</view>
		</view>
		<!-- 下拉刷新组件 -->
		<txt-pulldown :flagIn="ReachBottom[showView].flagPull"></txt-pulldown>
	</view>
</template>

<script>
import {
	teacher, // 教师列表
	getClassroomList, // 教室列表
	collectSubmit // 预约教师  提交订单
} from '@/common/api.js';
import onReachBottoms from '@/common/mixin/onReachBottoms.js';
export default {
	mixins: [onReachBottoms],
	data() {
		return {
			tabbar: ['线下教室', '预约老师'],
			teacherList: [],
			ClassroomList: [],
			// 用户数据
			rawData: null,
			// 本页面将会运用独立的下拉刷新体
			ReachBottom: [
				// 教室管理
				{
					name: '线下教室',
					// 页码
					num: 1,
					// 下拉标志
					flagPull: true,
					// 总页数
					total: 0,
					uniqueDetailsItems: [],
					code: null,
					params: null
				},
				// 教师管理
				{
					name: '预约老师',
					// 页码
					num: 1,
					// 下拉标志
					flagPull: true,
					// 总页数
					total: 0,
					uniqueDetailsItems: [],
					code: null,
					params: null
				}
			]
		};
	},
	methods: {
		// 点击预约的时候
		async clickShopping(item) {
			uni.setStorageSync('subscribeDetails', item);
			uni.navigateTo({
				url: '/pages/subscribe/details/detail/detail'
			});
		},
		// 点击房间详情的时候
		async clickRoom(item) {
			uni.setStorageSync('subscribeDetails', item);
			uni.navigateTo({
				url: '/pages/subscribe/roomDetails/roomDetails'
			});
		},
		async reqPaging1() {
			// 全部
			let { data, total } = await getClassroomList({ limit: 10, page: this.ReachBottom[0].num });
			this.ReachBottom[0].uniqueDetailsItems = [...this.ReachBottom[0].uniqueDetailsItems, ...data];
			this.ReachBottom[0].total = total;
			this.ReachBottom[0].flagPull = this.UsePullDown(this.ReachBottom[0].uniqueDetailsItems, this.ReachBottom[0].total);
		},
		async reqPaging2() {
			// 全部
			let { data, total } = await teacher({ limit: 10, page: this.ReachBottom[1].num });
			this.ReachBottom[1].uniqueDetailsItems = [...this.ReachBottom[1].uniqueDetailsItems, ...data];
			this.ReachBottom[1].total = total;
			this.ReachBottom[1].flagPull = this.UsePullDown(this.ReachBottom[1].uniqueDetailsItems, this.ReachBottom[1].total);
		}
	},
	async onShow() {
		// 如果未登录就先登录

		if (!uni.getStorageSync('userData')) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}

		// let { data, total } = await teacher({});
		// this.teacherList = data;
		// let { data: ClassroomList } = await getClassroomList({});
		// this.ClassroomList = ClassroomList;

		this.rawData = uni.getStorageSync('userData');
		switch (false) {
			case !!this.rawData.avatarUrl:
			case !!this.rawData.nickName:
			case !!this.rawData.phoneNumber:
				uni.navigateTo({
					url: '/pages/login/login'
				});
		}
		console.log('111', this.rawData);
	}
};
</script>

<style lang="scss" script>
.tabbar {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	box-shadow: 0 -1px 1px rgba(100, 100, 100, 0.2);
	height: 100rpx;
	border-radius: 0 0 50rpx 50rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.tabbar-item {
		width: 170rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.text {
		// width: 120rpx;
		// background-color: aqua;
	}
	.showView {
		margin-top: 5rpx;
		height: 20rpx;
		width: 70rpx;
		background-color: #d2e8eb;
		border-radius: 10rpx;
	}
}

.block {
	height: 100rpx;
}
// 教师 教室预约列表

.common-list {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: clac(765rpx - (56rpx));
	// padding: 28rpx 0;
	.imgs {
		margin: 28rpx;
	}
	.img {
		width: 165rpx;
		height: 165rpx;
	}
	.img-list {
		margin: 14rpx;
		// width: 100%;
		flex: 1;
		.img-title {
			font-size: 32rpx;
			color: #3b3a3f;
		}
		.img-text {
			color: #767678;
			font-size: 25rpx;
			width: 100%;
		}
	}

	.buttons {
		margin: 28rpx 28rpx 28rpx 0;
	}
}
</style>
